<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>jQuery xFilterList</title>

  <style>
  @import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
  body {
    font-family: 'Open Sans Condensed', sans-serif;
    background: rgba(226, 226, 226, 0.3);
    cursor: default;
    margin: 0;
  }
  h1,
  p {
    text-align: center;
    padding: 0;
    display: block;
    margin: 0;
  }
  p {
    padding: 0;
    color: #B0B0B0;
  }
  h1 {
    margin-top: 10px;
    margin-bottom: 0;
    font-weight: normal;
  }
  #chessboard {
    max-width: 757px;
    margin: 0 auto;
  }
  /* Filters */
  
  #filters {
    text-align: center;
    color: #ccc;
    font-size: 15px;
    padding: 15px 0 0 0;
  }
  #filters a {
    color: #373A3C;
    margin-left: 5px;
    margin-right: 5px;
    text-decoration: none;
    transition: all .2s ease-out;
  }
  #filters a:first-child {} #filters a:hover,
  #filters a.active {
    color: #d37070;
  }
  /* Sortlist */
  
  #sortlist {
    position: relative;
    display: block;
    padding: 0;
    margin: 1.5em auto;
    transition: all .4s ease-out;
  }
  #sortlist li {
    position: absolute;
    width: 90px;
    height: 90px;
    display: block;
    text-align: center;
    font-size: 3.2em;
    line-height: 1.6em;
    overflow: hidden;
    color: #868686;
    background-color: #E9E9E9;
    box-shadow: inset 0px 0px 0px 1px #CECECE;
    transition: all 0.4s ease-out;
  }
  #sortlist > li:hover {
    /*color: #d37070;*/
    
    color: #D17E7E;
  }
  /* Creating the chessboard */
  
  #sortlist li:nth-child(-2n+8),
  #sortlist li:nth-child(8) ~ li:nth-child(-2n+15),
  #sortlist li:nth-child(16) ~ li:nth-child(-2n+24),
  #sortlist li:nth-child(24) ~ li:nth-child(-2n+31),
  #sortlist li:nth-child(32) ~ li:nth-child(-2n+40),
  #sortlist li:nth-child(40) ~ li:nth-child(-2n+47),
  #sortlist li:nth-child(48) ~ li:nth-child(-2n+56),
  #sortlist li:nth-child(56) ~ li:nth-child(-2n+63) {
    background-color: white;
  }
  #sortlist.filtered > li {
    color: #D17E7E;
    background-color: white;
  }
  .link {
    padding: 10px 0;
  }
  </style>

  <script src="jquery-1.11.1.min.js"></script>
  <script src="jquery.xfilterlist.js"></script>
  <script type="text/javascript">
  $(window).on('load', function() {

    // In action
    var sortlist = $('#sortlist');
    var mg = new xFilterList(sortlist, {
      // you can set the margin in pixels
      margin: 5
    });

    // Filtering
    var filter, links = $('a');
    links.on('click', function() {
      if (!$(this).hasClass('active')) {

        // Retrieve the filter value
        filter = $(this).attr('data-filter');
        // Filtering by retrieved value
        mg.filterBy(filter);

        links.removeClass('active');
        $(this).addClass('active');

        if (filter === 'all') {
          sortlist.removeClass('filtered');
        } else {
          sortlist.addClass('filtered');
        }
      }

    });

    // Trigger click event for first link
    links.first().trigger('click');
  });
  </script>
</head>

<body>
  <h1>My xFilterList Chessboard</h1>
  <p>A simple grid list plugin for easy filter and sorting.</p>

  <nav id="filters">
    Filter by:
    <a href="javascript:;" data-filter="all">All</a> |
    <a href="javascript:;" data-filter="black">Black</a> |
    <a href="javascript:;" data-filter="white">White</a> |
    <a href="javascript:;" data-filter="first-line">First Line</a> |
    <a href="javascript:;" data-filter="second-line">Second Line</a> |
    <a href="javascript:;" data-filter="royalty">Royalty</a> |
    <a href="javascript:;" data-filter="infantry-black">Black Infantry</a> |
    <a href="javascript:;" data-filter="infantry-white">White Infantry</a> |
    <a href="javascript:;" data-filter="rooks">Rooks</a>
  </nav>

  <div id="chessboard">

    <ul id="sortlist">

      <li data-filter="black second-line infantry-black">&#9823;</li>
      <li data-filter="black second-line infantry-black">&#9823;</li>
      <li data-filter="black second-line infantry-black">&#9823;</li>
      <li data-filter="black second-line infantry-black">&#9823;</li>
      <li data-filter="black second-line infantry-black">&#9823;</li>
      <li data-filter="black second-line infantry-black">&#9823;</li>
      <li data-filter="black second-line infantry-black">&#9823;</li>
      <li data-filter="black second-line infantry-black">&#9823;</li>

      <li data-filter="black first-line rooks">&#9820;</li>
      <li data-filter="black first-line infantry-black">&#9822;</li>
      <li data-filter="black first-line infantry-black">&#9821;</li>
      <li data-filter="black first-line royalty">&#9819;</li>
      <li data-filter="black first-line royalty">&#9818;</li>
      <li data-filter="black first-line infantry-black">&#9821;</li>
      <li data-filter="black first-line infantry-black">&#9822;</li>
      <li data-filter="black first-line rooks">&#9820;</li>

      <!--li data-filter="empty"></li>
      <li data-filter="empty"></li>
      <li data-filter="empty"></li>
      <li data-filter="empty"></li>
      <li data-filter="empty"></li>
      <li data-filter="empty"></li>
      <li data-filter="empty"></li>
      <li data-filter="empty"></li-->

      <li data-filter="white first-line rooks">&#9814;</li>
      <li data-filter="white first-line infantry-white">&#9816;</li>
      <li data-filter="white first-line infantry-white">&#9815;</li>
      <li data-filter="white first-line royalty">&#9813;</li>
      <li data-filter="white first-line royalty">&#9812;</li>
      <li data-filter="white first-line infantry-white">&#9815;</li>
      <li data-filter="white first-line infantry-white">&#9816;</li>
      <li data-filter="white first-line rooks">&#9814;</li>

      <li data-filter="white second-line infantry-white">&#9817;</li>
      <li data-filter="white second-line infantry-white">&#9817;</li>
      <li data-filter="white second-line infantry-white">&#9817;</li>
      <li data-filter="white second-line infantry-white">&#9817;</li>
      <li data-filter="white second-line infantry-white">&#9817;</li>
      <li data-filter="white second-line infantry-white">&#9817;</li>
      <li data-filter="white second-line infantry-white">&#9817;</li>
      <li data-filter="white second-line infantry-white">&#9817;</li>

    </ul>

  </div>
</body>

</html>
